<template>
  <div>
    <!-- <div style="margin:20px 0 0 40px;color:red;">设置规则：年>半年>季>月</div> -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column align="center" label="套餐名称">
        <template slot-scope="scope">
          <el-input v-model="scope.row.vipName"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="date" label="套餐收费">
        <template slot-scope="scope">
          <el-input controls-position="right" style="width:120px" v-model="scope.row.price"></el-input>元
        </template>
      </el-table-column>
      <el-table-column align="center" prop="date" label="VIP折扣">
        <template slot-scope="scope">
          <el-input controls-position="right" style="width:120px" v-model="scope.row.discount"></el-input>%
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="VIP有效时长">
        <template slot-scope="scope">
          <el-input-number
            controls-position="right"
            style="width:100px"
            v-model="scope.row.duration"
          ></el-input-number>月
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="原价">
        <template slot-scope="scope">
          <el-input-number
            controls-position="right"
            style="width:120px"
            v-model="scope.row.originalPrice"
          ></el-input-number>元
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="可使用欧币数量">
        <template slot-scope="scope">
          <el-input-number
            controls-position="right"
            style="width:120px"
            v-model="scope.row.obalanceNum"
          ></el-input-number>元
        </template>
      </el-table-column>
      <el-table-column align="center" prop="address" label="赠送积分">
        <template slot-scope="scope">
          <el-input-number controls-position="right" style="width:100px" v-model="scope.row.points"></el-input-number>个
        </template>
      </el-table-column>
      <el-table-column align="center" label="描述语">
        <template slot-scope="scope">
          <el-input autosize type="textarea" v-model="scope.row.slogan"></el-input>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" prop="address" label="每月赠送代金券金额" width="150px">
        <template slot-scope="scope">
          <el-input-number
            controls-position="right"
            style="width:100px"
            v-model="scope.row.couponMoney"
          ></el-input-number>元
        </template>
      </el-table-column>-->
      <!-- <el-table-column align="center" prop="address" label="每月赠送代金券有效时长" width="150px">
        <template slot-scope="scope">
          <el-input-number
            controls-position="right"
            style="width:100px"
            v-model="scope.row.couponDays"
          ></el-input-number>天
        </template>
      </el-table-column>-->
      <!-- <el-table-column align="center" label="权益说明">
        <template slot-scope="scope">
          <el-input autosize type="textarea" v-model="scope.row.desc"></el-input>
        </template>
      </el-table-column>
   
      <el-table-column align="center" label="VIP详情介绍">
        <template slot-scope="scope">
          <img
            style="width:100px;height:100px;margin:0 auto 10px auto"
            :src="scope.row.photo"
            class="avatar"
          />
          <el-button @click="getIndex(scope.$index)" type="primary" size="mini">上传图片</el-button>
        </template>
      </el-table-column>-->
      <!-- <el-table-column align="center" prop="address" label="操作">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.status">启用</el-checkbox>
        </template>
      </el-table-column>-->
    </el-table>
    <el-dialog title="选择图片" :visible.sync="showUpload" width="30%">
      <el-upload
        :action="imageUploadUrl"
        :show-file-list="false"
        :before-upload="handleBeforeUpload"
        list-type="picture-card"
        name="avatar"
        :on-success="handleBannerSuccess"
      >
        <i
          class="el-icon-plus avatar-uploader-icon"
          style="width:148px;height:148px;line-height:148px"
        ></i>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showUpload = false">取 消</el-button>
        <el-button type="primary" @click="showUpload = false">确 定</el-button>
      </span>
    </el-dialog>
    <h3>平台消息推送:</h3>
    <el-button @click="showMessagePush = true" type="primary">填写</el-button>
    <!-- <div class="clearfix">
      <el-upload
        :action="imageUploadUrl"
        list-type="picture-card"
        :show-file-list="false"
        name="avatar"
        :limit="1"
        :before-upload="handleBeforeUpload"
        :on-success="handleBannerSuccesss"
      >
        <img width="200px" height="150px" v-if="paytPicture" :src="paytPicture" alt />
        <i v-else class="el-icon-plus"></i>
      </el-upload>
      <div class="el-upload__tip" slot="tip">只能上传图片文件，且不超过3MB（第一张作为缩略图）</div>
    </div>-->
    <el-dialog title="消息推送" :visible.sync="showMessagePush" width="50%">
      <el-form :model="message" ref="message" label-width="100px" class="demo-ruleForm">
        <el-form-item label="消息标题" prop="messageTile">
          <el-input v-model="message.messageTile"></el-input>
        </el-form-item>
        <el-form-item label="标题内容" prop="messageDesc">
          <el-input type="textarea" v-model="message.messageDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showMessagePush = false">取 消</el-button>
        <el-button type="primary" @click="pushMessage('message')">确 定</el-button>
      </span>
    </el-dialog>

    <h3>购买须知：</h3>
    <Tinymce v-model="explain" :height="300" style="width: 705px;"></Tinymce>

    <el-button type="primary" @click="saveVIP">保存</el-button>
  </div>
</template>
<script>
import { getVipBene, vipBeneSave } from "@/api/member";
import { marketing_member_vipBenefit } from "@/utils/permission";
import Tinymce from "@/components/Tinymce";
import { pushMessage } from "@/api/course";

export default {
  data() {
    return {
      imageUploadUrl: process.env.BASE_API + "/common/course/imageUpload",
      paytPicture: "",
      tableData: [],
      index: "",
      showUpload: false,
      explain: "",
      showMessagePush: false,
      message: {
        messageTile: "",
        messageDesc: "",
        typeId: "",
        messageTypeStatus: 4,
        messageTypes: 0
      }
    };
  },
  created() {
    this.getVipData();
  },
  components: {
    Tinymce
  },
  methods: {
    pushMessage() {
      if (this.message.messageTile == "") {
        this.$message("请填写消息标题");
        return;
      }
      if (this.message.messageDesc == "") {
        this.$message("请填写消息描述");
        return;
      }
      pushMessage(this.message).then(res => {
        this.$message(res.data.data);
      });
      this.showMessagePush = false;
      this.message = {
        messageTile: "",
        messageDesc: "",
        typeId: "",
        messageTypeStatus: 4,
        messageTypes: 0
      };
    },
    async saveVIP() {
      for (let i = 0; i < this.tableData.length; i++) {
        const element = this.tableData[i].status;
        if (element) {
          this.tableData[i].status = 1;
        } else {
          this.tableData[i].status = -1;
        }
      }
      var data = {
        vipOpenUse: this.tableData,
        explain: this.explain,
        paytPicture: this.paytPicture
      };
      await vipBeneSave(data).then(res => {
        this.$message({
          type: "success",
          message: "保存成功！"
        });
      });
      this.getVipData();
    },
    getIndex(val) {
      this.showUpload = true;
      this.index = val;
    },
    handleBannerSuccesss(response, file, fileList) {
      if (response.statusCode == 200) {
        this.paytPicture = response.data.imageUrl;
      } else {
        this.$message.error("上传失败，请稍候再试!");
      }
    },
    getVipData() {
      getVipBene().then(res => {
        this.tableData = res.data.data.companyMemberPrice;
        this.explain = res.data.data.explain.explain;
        this.paytPicture = res.data.data.companies.paytPicture;
        for (let i = 0; i < this.tableData.length; i++) {
          var element = this.tableData[i].status;
          if (element == -1) {
            this.tableData[i].status = false;
          } else {
            this.tableData[i].status = true;
          }
        }
      });
    },
    handleBeforeUpload(file) {
      console.log("上传文件之前触发啊、。。。");
      const isImg = file.type == "image/jpeg" || file.type == "image/png";
      if (!isImg) {
        this.$message.warning("上传图片只能是 JPG 或 PNG 格式");
      }
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isLt3M) {
        this.$message.error("上传图片大小不能超过 3MB!");
      }
      return isImg && isLt3M;
    },
    handleBannerSuccess(response, file, fileList) {
      console.log("上传成功");

      if (response.statusCode == 200) {
        this.tableData[this.index].photo = response.data.imageUrl;
        this.showUpload = false;
      } else {
        this.$message.error("上传失败，请稍候再试!");
      }
    }
  }
};
</script>
<style scoped>
h4 {
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
  padding-left: 150px;
  font-size: 14px;
}

.borderBottom {
  border-bottom: 1px solid #eee;
}
.el-upload {
  width: 178px !important;
  height: 178px !important;
}
label {
  font-size: 12px;
}

.label-div {
  line-height: 50px;
}

.label-div label {
  width: 100px;
  text-align: right;
  display: inline-block;
  margin-right: 30px;
}

table td {
  text-align: center;
}

tr {
  line-height: 40px;
}

.width60 {
  width: 60px;
  display: inline-block;
  text-align: left;
}
</style>
